<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus';
import { getLogin } from '@/api/users'
import { useRouter, useRoute } from 'vue-router';
import { useTokenStore } from '@/stores/mytoken'
import { useDark } from '@vueuse/core';
import { useI18n } from 'vue-i18n';

// 国际化
const { t } = useI18n()

// 暗黑主题常量初始化
const isDark = useDark()

const router = useRouter()
const route = useRoute()
const tokenStore = useTokenStore()

// 登录状态加载
const isLoadings = ref(false)

// 登录表单
const form = reactive({
    phone: '18201288771',
    password: '111111'
})

// 登录逻辑
async function hdlLogin() {
    isLoadings.value = true
    // 登录校验
    await formRef.value?.validate().catch((err) => {
        ElMessage.error('登录失败，请检查输入信息')
        isLoadings.value = false
        // 中断代码执行
        throw err
    })

    // 校验成功后 登录请求
    const data = await getLogin(form).then((result) => {
        if (result.data.success) {
            ElMessage.success('登录成功')
            // 返回登录请求返回的数据
            // 便于保存token
            return result.data
        } else {
            ElMessage.error("登录失败，请检查输入信息")
            isLoadings.value = false
            throw new Error(result.data.message)
        }

    })

    // 保存登录请求返回的token
    tokenStore.setToken(data.content)
    isLoadings.value = false
    // 跳转到首页  如果有query参数redirect 则跳转到该页面
    router.push(route.query.redirect as string || '/')
}


// 表单校验规则
const rules = reactive<FormRules>({
    phone: [
        {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
        },
        {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
        }
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
        },
        {
            min: 6,
            max: 16,
            message: '密码长度必须在6-16位之间',
            trigger: 'blur'
        }
    ]
})

// 表单标识符
const formRef = ref<FormInstance>()


// 粒子背景主题切换
const particlesDarkLight = computed(() => {
    if (!isDark.value) {
        return {
            background: {
                color: {
                    value: '#ffffff'
                }
            },
            fpsLimit: 120,
            interactivity: {
                events: {
                    onClick: {
                        enable: true,
                        mode: 'push'
                    },
                    onHover: {
                        enable: true,
                        mode: 'repulse'
                    },
                },
                modes: {
                    bubble: {
                        distance: 400,
                        duration: 2,
                        opacity: 0.8,
                        size: 40
                    },
                    push: {
                        quantity: 4
                    },
                    repulse: {
                        distance: 200,
                        duration: 0.4
                    }
                }
            },
            particles: {
                color: {
                    value: '#000000'
                },
                links: {
                    color: '#000000',
                    distance: 150,
                    enable: true,
                    opacity: 0.5,
                    width: 2
                },
                move: {
                    direction: 'none',
                    enable: true,
                    outModes: 'bounce',
                    random: false,
                    speed: 6,
                    straight: false
                },
                number: {
                    density: {
                        enable: true,
                    },
                    value: 80
                },
                opacity: {
                    value: 0.5
                },
                shape: {
                    type: 'circle'
                },
                size: {
                    value: { min: 1, max: 5 }
                }
            },
            detectRetina: true
        }
    } else {
        return {
            background: {
                color: {
                    value: '#000000'
                }
            },
            fpsLimit: 120,
            interactivity: {
                events: {
                    onClick: {
                        enable: true,
                        mode: 'push'
                    },
                    onHover: {
                        enable: true,
                        mode: 'repulse'
                    },
                },
                modes: {
                    bubble: {
                        distance: 400,
                        duration: 2,
                        opacity: 0.8,
                        size: 40
                    },
                    push: {
                        quantity: 4
                    },
                    repulse: {
                        distance: 200,
                        duration: 0.4
                    }
                }
            },
            particles: {
                color: {
                    value: '#ffffff'
                },
                links: {
                    color: '#ffffff',
                    distance: 150,
                    enable: true,
                    opacity: 0.5,
                    width: 2
                },
                move: {
                    direction: 'none',
                    enable: true,
                    outModes: 'bounce',
                    random: false,
                    speed: 6,
                    straight: false
                },
                number: {
                    density: {
                        enable: true,
                    },
                    value: 80
                },
                opacity: {
                    value: 0.5
                },
                shape: {
                    type: 'circle'
                },
                size: {
                    value: { min: 1, max: 5 }
                }
            },
            detectRetina: true
        }
    }
})

</script>

<template>
    <div class="login">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="auto" style="max-width: 600px"
            label-position="top" size="large">
            <h3>Log Here</h3>
            <el-form-item :label="t('phone')" prop="phone">
                <el-input v-model="form.phone" />
            </el-form-item>
            <el-form-item :label="t('password')" prop="password">
                <el-input v-model="form.password" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="hdlLogin" :loading="isLoadings">{{ t('login') }}</el-button>
            </el-form-item>
        </el-form>

        <!-- 离子组件 -->
        <div class="particles">
            <vue-particles id="tsparticles" :options="particlesDarkLight" />
        </div>
    </div>
</template>

<style scoped lang="scss">
.login {
    // background-color: #ffffff;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    // 背景图线性渐变
    // background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);

    .el-form {
        position: relative;
        z-index: 2;
        width: 300px;
        background-color: rgba (255, 255, 255, 0.07);
        padding: 30px;
        border: 0.1px solid #ccc;
        border-radius: 10px;
        // box-shadow: 0px 4px 10px 20px gray

        h3 {
            font-size: 32px;
            font-weight: 500;
            line-height: 42px;
            text-align: center;
        }

        .el-form-item {
            margin-bottom: 20px;
        }

        .el-button {
            width: 100%;
            margin-top: 30px;
            background-color: #ffffff;
            color: #080710;
            cursor: pointer;
        }
    }

    .particles {
        position: relative;
        z-index: 1;
    }


}
</style>
